<template>
  <div class="content">
    <!-- <BreadCrumb></BreadCrumb> -->
    <Breadcrumb></Breadcrumb>
    <div class="advert">
    <div class="tree">
      <el-tree :data="data" :expand-on-click-node="false" :render-content="renderContent" :props="props" lazy
      :load="loadNode" node-key="pid" @node-click="handleNodeClick">
    </el-tree>
    </div>
    <!-- 广告展示部分 -->
    <!-- <AdvertShow :treeData="treeData"></AdvertShow> -->
    <div class="banner">
    <advertime :treeData="treeData"></advertime>
    </div>
    </div>
    <!-- 弹框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%">
      <p>当前出于的广告位置：{{ advertInfo.name }}</p>
      <el-input type="text" v-model="advertName" />
 
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdvert">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {selectContentCategoryByParentId, deleteContentCategoryById, insertContentCategory, updateContentCategory} from '@/api/advert'
// import Advertime from './advertime.vue'
import Advertime from './advertime.vue'
// import AdvertShow from './advertshow.vue'
export default {
  name: 'A-list',
  components: {Advertime},
  data () {
    return {
        dialogVisible: false, //弹框状态关闭
      title: "添加广告",
      advertName: "", //广告名字
      advertInfo: {}, //点击广告节点内容
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
      },
      data: [],
       treeData:{name:'按钮'}
    }
  },
  created () {},
  mounted () {
    this.http()
  },
  methods: {
    async http(){
      let res = await selectContentCategoryByParentId()
      // // console.log(res);
      this.data = res.data.result
    },
     //点击tree节点---发送数据
    handleNodeClick(data) {
      // // console.log(data);
      this.treeData = data
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        //第一次请求
        selectContentCategoryByParentId().then((res) => {
          return resolve(res.data.result);
        });
      }
      if (node.level >= 1) {
        selectContentCategoryByParentId({
          id: node.data.pid,
        })
          .then((res) => {
            if (res.data.status === 200) {
              return resolve(res.data.result);
            } else {
              return resolve([]);
            }
          });
      }
    },
    // 添加删除按钮
     renderContent(h, { node, data }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(data, "add")}
            >
              增加
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.update(data, "update")}
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              删除
            </el-button>
          </span>
        </span>
      );
    },
    //render-content
    //增加
    append(data) {
      // // console.log(data);
      //显示弹框
      this.dialogVisible = true;
      this.title = "添加广告";
      //获取点击的节点内容
      this.advertInfo = data;
    },
    //删除-----------------------------------
    remove(node, data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await deleteContentCategoryById({pid:data.pid})
          if (res.data.status === 200) {
            //添加成功
            this.$message({
              message: "恭喜你，删除成功",
              type: "success",
            });
            //更新tree
            this.http()
          } else {
            //错误信息提示
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //修改-------------------------------------
    update(data) {
      //显示弹框
      this.dialogVisible = true;
      this.title = "修改广告名称";
      //获取点击的节点内容
      this.advertInfo = data;
    },
    //提交确定按钮
    submitAdvert() {
      if (this.title == "添加广告") {
        // // console.log("添加事件");
        insertContentCategory({
          pid: this.advertInfo.pid,
          name: this.advertName,
        })
          .then((res) => {
            // // console.log(res.data);
            if (res.data.status === 200) {
              //添加成功
              this.$message({
                message: "恭喜你，这是一条成功消息",
                type: "success",
              });
              //隐藏弹框--清空数据
              this.dialogVisible = false;
              this.advertName = "";
              //更新tree
              this.http()
            } else {
              //错误信息提示
 
            }
          });
      } else {
        // // console.log("修改事件");
        //修改
        updateContentCategory({
          pid: this.advertInfo.pid,
          name: this.advertName,
        })
          .then(res => {
            if (res.data.status === 200) {
              //添加成功
              this.$message({
                message: "恭喜你，修改成功",
                type: "success",
              });
              //隐藏弹框--清空数据
              this.dialogVisible = false;
              this.advertName = "";
              //更新tree
              this.http()
            } else {
              //错误信息提示
 
            }
          })
 
      }
    },
  }
}
</script>

<style lang="less" scoped>
.content{
  margin-left: 10px;
  // padding-right: 50px;
  overflow: hidden;
}
  .advert{
    margin: 20px;
    display: flex;
    justify-content: flex-start;
}
.banner{
  flex: 1;
}
  .tree{
    width: 300px;
  }
</style>
